1). Add a Button on IndexPage for open a modal popup for FileUploadControl like given this image.

2). And add a partial view for define modal popup’s design here, using bootstrap for it.

@model  MvcAppFirst.Customer



@{

    ViewBag.Title = "_UploadedFiles";

    Layout = "~/Views/Shared/_Layout.cshtml";

}



<h2>_UploadedFiles</h2>

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<link href="~/Content/jQuery.FileUpload/css/jquery.fileupload.css" rel="stylesheet" />

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>



<style>

    .bg {

        background-color: darkgray;

    }



    .BG {

        background-color: Gainsboro;

    }



    #loadingImg {

        display: none;

    }

</style>





<div class="modal-content" style="width: 800px !important;">

    @using (Html.BeginForm("SaveFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

    {   

        @Html.HiddenFor(m => m.CustomerID, new { @Value = TempData["ID"] })

        <div class="modal-header">



            <h5 class="modal-title" id="exampleModalLabel" align="center">Choose Your File</h5>



            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                <span aria-hidden="true">&times;</span>

            </button>

        </div>

        <div class="modal-body">

            <div class="container">

                <div class="col-md-12">

                    <div class="form-area">

                        <div class="container" align="center">

                            <input type="file" multiple="multiple" name="file" class="BG" />

                            <button type="submit" value="Upload Files" class="btn btn-info">Upload File</button>

                            <br />

                        </div>



                    </div>

                </div>



            </div>



        </div>

    }

    <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

    </div>

    }                         

</div>

3). Create an ActionMethod for uploading files. And attach a folder to the SolutionExplorer to keep the uploaded files safe.

//----------For Image/File Upload------//



        [HttpGet]

        public ActionResult SaveFile(int customerID)

        {

            TempData["ID"] = customerID;

            return PartialView("_UploadedFiles");

        }



        [HttpPost]

        public ActionResult SaveFile(Customer model, HttpPostedFileBase file)

        {

            if (file != null && file.ContentLength > 0)

                try

                {

                    string path = Path.Combine(Server.MapPath("~/SavedFiles"), Path.GetFileName(file.FileName));

                    file.SaveAs(path);

                    bool success = false;

                    var Customer = AP.Customers.Where(x => x.CustomerID == model.CustomerID).FirstOrDefault();

                    if (Customer != null)

                    {

                        success = AP.INSERTorUPDATE_CUSTOMER(Customer.CustomerID, Customer.Name, Customer.Mobileno, Customer.Address, Customer.Birthdate, DateTime.Now, Customer.EmailID, path) == 1 ? true : false;

                        AP.SaveChanges();

                    }

                    ViewBag.Message = "File uploaded successfully";

                }

                catch (Exception ex)

                {

                    ViewBag.Message = "ERROR:" + ex.Message.ToString();

                }

            else

            {

                ViewBag.Message = "You have not specified a file.";

            }

            return RedirectToAction("Index");

        }

4). Add a Download button (or Link button) in IndexView Page for download saved files.

For this action, we can define only the ActionMethod for download.

//---------------Download Files-------------//



        public ActionResult Downloads(int customerID)

        {

            Customer model = AP.Customers.FirstOrDefault(x => x.CustomerID == customerID);



            if (model != null)

            {

                if (System.IO.File.Exists(Server.MapPath(resolveVirtual(model.UploadFiles))))

                {

                    string fileName = Path.GetFileName(resolveVirtual(model.UploadFiles));

                    byte[] fileBytes = System.IO.File.ReadAllBytes(Server.MapPath(resolveVirtual(model.UploadFiles)).ToString());

                    return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);

                }

            }

                 

            return null;

        }



        public static string resolveVirtual(string physicalPath)

        {

            string url = physicalPath.Substring(System.Web.HttpContext.Current.Server.MapPath("~").Length).Replace('\\', '/').Insert(0, "~/");

            return (url);

        }

5). Work on IndexViewPage.

@using (Html.BeginForm("DownloadFile", "Controller", FormMethod.Get)){}